<template>
  <div class="phone-login">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
      <el-form-item prop="phone">
        <el-input type="text" placeholder="请输入手机号码" v-model="loginForm.phone"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="text" placeholder="请输入短信验证码" v-model="loginForm.password">
                    <span class="rule-password" slot="suffix">
                        <tencent-captcha :phone="loginForm.phone" :phoneRule="phoneRule" scene="1"
                                         class="rule-password">
                        </tencent-captcha>
                    </span>
        </el-input>
      </el-form-item>
      <div style="display: flex;justify-content: flex-end">
        <span class="fort_password"> </span>
      </div>
      <el-form-item>
        <el-button style="width: 100%;" type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>
<!--      <el-form-item>-->
<!--        <el-button style="width: 100%;" @click="$router.push('/registration-agreement')">注册</el-button>-->
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import {userType} from "../../../util/base";
import {phone_login} from "../../../request/api";
import TencentCaptcha from "../../../components/TencentCaptcha/TencentCaptcha";

export default {
  name: "PhoneLogin",
  data() {
    var phoneRule = (rule, value, callback) => {
      let phoneRule = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
      if (value === '') {
        callback(new Error('请输入手机号码'));
        this.phoneRule = false;
      } else if (!phoneRule.test(value)) {
        callback(new Error('手机号码格式错误'))
        this.phoneRule = false;
      } else {
        this.phoneRule = true;
        callback();
      }
    };
    var passwordRule = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'));
      } else {
        callback();
      }
    };
    return {
      phoneRule: false,
      loginForm: {
        phone: '',//手机号码
        password: ''//密码(验证码)
      },
      rules: {
        phone: [
          {validator: phoneRule, trigger: 'blur'}
        ],
        password: [
          {validator: passwordRule, trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          phone_login({phone: this.loginForm.phone, msg_code: this.loginForm.password}).then(res => {
            Cookies.set("token", res.token);
            let {user_type} = userType(res.token);
            this.$store.commit('setUserType', user_type);
            this.$store.commit('setToken', res.token);
            let {user_name} = userType(res.token);
            this.$store.commit('setUserName', user_name)
            console.log('user_type', user_type, user_name)
            if (user_type == 1) {
              this.$router.push({path: '/user'});
            } else if (user_type == 2) {
              this.$router.push('/org');
            } else if (user_type == 3) {
              this.$router.push('/admin');
            }
          }).catch(err => {
            this.$message({
              type: 'error',
              message: err.msg
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.submitForm('loginForm')
      }
    };

  },
  components: {
    TencentCaptcha
  }
}
</script>

<style>
.loginForm .el-input__inner {
  border-radius: 0px;
  border: none;
  height: 48px;
  border-bottom: 1px solid #ebebeb;
}

.loginForm .el-form-item__error {
  margin-left: 15px;
}
</style>

<style scoped>
.rule-password {
  display: block;
  color: #409EFF;
}

.rule-password:hover {
  color: gray;
}

.fort_password {
  padding-bottom: 20px;
  font-size: 14px;
  color: gray;
  cursor: pointer;
}
</style>
